<template>
  <div style="float:left;position:absolute;">
    <div style="width:510px;float:left">
      <CalendarMutilPicker ref="Picker" :date="date" :initalValue="dataValue" :showBtn="false" :checkedType="'single'" class="picker" @clicked="pickerClick"></CalendarMutilPicker>
    </div>
    <div style="width:530px;float:left">
      <FilterTable
        ref="table"
        columnsRef="lxxAllTechnician"
        :columns="columns"
        :dataSource="dataSource"
        :isSelectColumn="false"
        :params="fetchParams"
        :onColumnsChange="columns => (this.columns = columns)"
        :onRowSelectChange="selectChangeHandle"
        :onSyncTableData="tableHandle"
      >
        <!--  :is-memory-pagination="true" -->
        <template slot="controls">
          <el-button size="small" @click="allHandle(1)">全选</el-button>
          <el-button size="small" @click="allHandle(0)">全消</el-button>
          <AjaxButton size="small" type="primary" :click="saveDialog">保存</AjaxButton>
        </template>
      </FilterTable>
    </div>

    <div :style="{ position: 'absolute', left: 0, bottom: 0, right: 0, zIndex: 9, borderTop: '1px solid #e9e9e9', padding: '10px 20px', background: '#fff', textAlign: 'right' }">
      <el-button @click="closeHandler">取 消</el-button>
    </div>
  </div>
</template>
<script>
/**
 * 维护技师排班表 - 全部排班
 * 芦小星
 */
import { dictionary } from '@/utils/dictMixin';
import { confirmAction, notifyAction } from '@/utils';
import { PersonList, saveList, technicianFindByDate, saveTechnicianAll, getAllList } from '@/api/repair/workshopManagement/technicianScheduling/index';
export default {
  name: 'lxxAllTechnician',
  mixins: [dictionary],
  props: ['rowData', 'date', 'initalValue', 'dateChange'],
  data() {
    return {
      saveData: [],
      queryParam: {},
      fetchParams: {},
      dataSource: [
        // { WORKGROUP_NAME: 'jhkf', EMPLOYEE_NAME: '很快就好', IS_SCHEDULING: 0 },
        // { WORKGROUP_NAME: 'jhkf', EMPLOYEE_NAME: '很快就好', IS_SCHEDULING: 0 },
        // { WORKGROUP_NAME: 'jhkf', EMPLOYEE_NAME: '很快就好', IS_SCHEDULING: 1 },
        // { WORKGROUP_NAME: 'jhkf', EMPLOYEE_NAME: '很快就好', IS_SCHEDULING: 1 },
        // { WORKGROUP_NAME: 'jhkf', EMPLOYEE_NAME: '很快就好', IS_SCHEDULING: 0 },
        // { WORKGROUP_NAME: 'jhkf', EMPLOYEE_NAME: '很快就好', IS_SCHEDULING: 0 },
        // { WORKGROUP_NAME: 'jhkf', EMPLOYEE_NAME: '很快就好', IS_SCHEDULING: 0 }
      ],
      selectedRow: [],
      columns: this.createTableColumns(),
      dateParams: '',
      tableData: [],
      dataValue: []
    };
  },
  created() {
    console.log('this.initalValue', this.initalValue);
    this.dataValue = JSON.parse(JSON.stringify(this.initalValue));
  },
  mounted() {
    this.BaseTable = this.$refs.table.$refs.pageTable;
  },
  methods: {
    createTableColumns() {
      return [
        {
          title: '班组名称',
          dataIndex: 'WORKGROUP_NAME',
          showOverflowTooltip: true,
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '技师名称',
          dataIndex: 'EMPLOYEE_NAME',
          filterType: 'input',
          sorter: true,
          disabled: true,
          filter: true,
          defaultEditable: true
        },
        {
          title: '排班',
          dataIndex: 'IS_SCHEDULING',
          sorter: true,
          filter: true,
          editable: true,
          defaultEditable: true,
          editType: 'checkbox',
          filterType: 'checkbox',
          initialValue: 0,
          filterItems: [
            { text: '选中', value: 1 },
            { text: '未选中', value: 0 || '' }
          ],
          editItems: [
            { text: '', trueValue: 1 },
            { text: '', falseValue: 0 }
          ]
        }
      ];
    },
    tableHandle(val) {
      console.log(val);
      this.tableData = val;
    },
    // 按排班日期查询排班工人
    async technicianFindByDate(date) {
      console.log('date', date);
      const res = await technicianFindByDate({ ON_DUTY: date });
      if (res.resultCode == 200) {
        this.dataSource = res.data;
        console.log(333, res.data);
      }
    },

    // 全选/全消
    allHandle(state) {
      for (var i = 0; i < this.tableData.length; i++) {
        this.tableData[i].IS_SCHEDULING = state;
      }
    },
    pickerClick(val) {
      console.log('aaa', val, 'aaa');
      this.technicianFindByDate(val);
      this.dateParams = val;
    },
    async saveDialog() {
      console.log('这是保存的方法');
      const res = await saveTechnicianAll({ USER: this.tableData, ON_DUTY: this.dateParams[0] });
      res.resultCode == 200 && notifyAction('保存成功', 'success');

      const res1 = await getAllList({ date: this.dateChange });
      this.dataValue = res1.data.map(x => ({ date: x.ON_DUTY, num: x.CONT }));
      console.log('dateChange', this.dateChange);
      console.log('res', res1);
    },
    changeHandle(val) {
      console.log('表单面板的数据：', val);
    },
    // 行选中状态变化时的回调
    selectChangeHandle(val) {
      this.selectedRow = val;
    },
    closeHandler(param) {
      this.$emit('close', false, param);
    }
  }
};
</script>
<style scoped>
.pickerBox {
  width: 100%;
  background-size: 200%;
  background-repeat: no-repeat;
  background-color: #fff;
}
/* assets/img/login_bg.svg */
.picker {
  margin-left: 10px;
  margin-bottom: 10px;
}
</style>
